<template>
  <div id="app">
    <div class='qualityManual-container'>
        <div  class='qualityManual-container-office'>
          <vab-only-office :option='option' />
        </div>
  </div>
  </div>
</template>

<script>
import vabOnlyOffice  from '@/views/onlyoffice/VabOnlyOffice.vue'
import { listTemplate, getTemplate,addTemplate} from "@/api/contract/template";

export default {
  name: 'App',
  components: {
    vabOnlyOffice
  },
  data() {
      return {
		  template:{},
        //参考vabOnlyOffice组件参数配置
        option: {
          url: '',
          isEdit: '',
          fileType: '',
          title: '',
		  model:'',
          lang: '',
		  key:null,
          isPrint: '',
		  editUrl:'',
           user: { id:'',name:''}
        },
      }
    },
	created() {
		this.getFile();
	},
    methods: {

		UUID2LEN(len, radix){
			 var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
			    var uuid = [],
			        i;
			    radix = radix || chars.length;

			    if (len) {
			        // Compact form
			        for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
			    } else {
			        // rfc4122, version 4 form
			        var r;

			        // rfc4122 requires these characters
			        uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
			        uuid[14] = '4';

			        // Fill in random data.  At i==19 set the high bits of clock sequence as
			        // per rfc4122, sec. 4.1.5
			        for (i = 0; i < 36; i++) {
			            if (!uuid[i]) {
			                r = 0 | Math.random() * 16;
			                uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
			            }
			        }
			    }

			    return uuid.join('');
		},
      getFile() {
        getTemplate(this.$route.params.id).then(response => {
        	this.template = response.data;
					this.option.isEdit = true
					this.option.lang = 'zh-CN'
					this.option.url = this.getImgUrl(this.template.contractTemplateAddress)
					this.option.editUrl= process.env.VUE_APP_BASE_API+'/contract/template/agreement/edit?contractName='+this.template.contractTemplateName+'&tenantId='+this.template.tenantId+'&contractId='+this.template.contractId
					this.option.title = this.template.contractTemplateName
					this.option.fileType = 'doc'
					this.option.isPrint = true
					this.option.key=this.UUID2LEN(20,62)
					console.log(this.option)
					var usr=this.$store.state.user
					this.option.user= {id:usr.name, name:usr.name}
        })
      },
    },
		destroyed(){
			this.$IVue.$emit('fevent')
		}
}
</script>

<style>
html,body{
  height:100%;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height:100%;

}
.qualityManual-container {
    padding: 0 !important;
    height:100%;
  }
  .qualityManual-container-office {
      width: 100%;
      height: calc(100% - 55px);
    }
</style>

